<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>登录</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        html {
            background: #f5f5f5;
        }
        
        a {
            text-decoration: none;
            color: #e8380d;
        }
        
        .box {
            width: 850px;
            background: #fff;
            margin: 60px auto 40px;
            text-align: center;
            padding: 50px 0;
        }
        
        .sign {
            height: 62px;
            overflow: hidden;
        }
        
        .loginType {
            height: 60px;
            line-height: 60px;
        }
        
        .loginType button {
            font-size: 20px;
        }
        
        button {
            border: none;
            background: #fff;
            outline: none;
            cursor: pointer;
        }
        
        input {
            outline: none;
            border: 1px solid #eee;
            padding: 0 10px;
        }
        
        .type,
        .register {
            color: #e8380d;
        }
        
        .account input {
            width: 340px;
            height: 50px;
            margin: 10px auto;
            padding: 0 10px;
        }
        
        .login1 {
            width: 360px;
            height: 50px;
            margin: 0 auto;
            background: #e8380d;
        }
        
        .login {
            background: #e8380d;
            color: #fff;
            font-size: 18px;
            line-height: 50px;
        }
        
        .enroll {
            width: 360px;
            margin: 10px auto;
            text-align: right;
        }
        
        .else {
            width: 360px;
            height: 30px;
            margin: 0 auto;
            text-align: left;
            overflow: hidden;
            position: relative;
            line-height: 30px;
        }
        
        .else img {
            position: absolute;
        }
        
        p {
            text-align: center;
            color: #cccccc;
            position: relative;
            margin: 30px 0 50px;
        }
        
        p img {
            width: 17px;
            position: absolute;
        }
        
        p span {
            margin-left: 24px;
        }
        
        .login1:hover {
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="sign"><img src="../project 2/img/to.png" alt=""></div>
        <div class="loginType">
            <button class="type">账号密码登录 | </button>
            <button>手机验证码登录</button>
        </div>
        <div class="account">
            <input type="text" placeholder="邮箱/手机号码/用户名" id="username"><br>
            <input type="password" placeholder="密码为8-16个字符（数字、大小写字母、符号至少含三种）" id="password">
        </div>
        <div class="login1">
            <button class="login">立即登录</button>
        </div>
        <div class="enroll">
            <button class="register"><a href="register.html">注册新账号</a>  | </button>
            <button>忘记密码？</button>
        </div>
        <div class="else">
            <span>其他方式登录:</span>
            <img src="img/third_login.png">
        </div>
    </div>
    <p>©2014 - 2020 深圳市中兴智谷科技有限公司版权所有，并保留所有权利 &nbsp;<img src="img/govIcon.gif"> <span>服务协议 |隐私政策|</span></p>
    <script src="jquery.min.js"></script>
    <script src="./netaddress.js"></script>
    <!-- <script src="js/interface.js"></script> -->
    <script>
        // $(".login1").click(function() {
        //     if ($("#password").val() === "" || $("#username").val() === "") {
        //         alert("内容不能为空");
        //         return;




        //     }


        // })
        window.onkeydown = function(event) {
            if (event.keyCode === 13) {
                $(".login1").click()
            }
        }
        $(".login").click(function() {

        })


        // 登录表单验证
        let username = /^1\d{10}$/;
        let userPwd = /^[a-zA-Z0-9]{1,8}$/;
        let flaguserName;
        let flaguserPwd;
        $(".userName").blur(function() {
            if (userName.test($(".userName").val()) || userPwd.test($(".userName").val())) {
                flaguserName = true;
            } else {
                $(".erro1").css({
                    display: "block",
                })
                $(this).css({
                    border: "1px solid red"
                })
            }
        })
        $(".userName").focus(function() {
            $(this).next().css({
                display: "none",
            })
            $(this).css({
                border: "1px solid red"
            })
        })
        $(".userPwd").blur(function() {
            if ($(".userPwd").val() == "") {
                $(".login-warn").css({
                    display: "block",
                })
                $(this).css({
                    border: "1px solid red"
                })
            } else {
                flaguserPwd = true;
            }
        })
        $(".userPwd").focus(function() {
                $(this).next().css({
                    display: "none",
                })
                $(this).css({
                    border: "1px solid #dadada"
                })
            })
            //登录向数据库发送数据 看是否请求成功
        $(".submit-login").click(function() {
            console.log(flaguserName);
            console.log(flaguserPwd);
            let userName1 = $('.userName').val();
            let userPwd1 = $('.userPwd').val();
            if (flaguserName && flaguserPwd) {
                console.log("登录前端验证成功可发送数据");
                $.ajax({
                    url: "../php/login.php",
                    type: "post",
                    data: "userName=" + userName1 + "&userPwd=" + userPwd1,
                    success: function(resText) {
                        if (resText == 1) {

                            console.log(resText);
                            $(window).attr('location', 'homePage.html');
                            console.log(resText);

                        } else if (resText = 2) {

                            $(".username").css({
                                border: "1px solidred",
                            })
                        } else if (resText == 0) {
                            $(".password").css({
                                border: "1px solid red",
                            })
                        }
                    }
                })
            }
        })



        $(".loginType button").click(function() {
            $(this).addClass("type").siblings().removeClass("type")
        })
    </script>
</body>

</html>